<template>
  <div class="article-detail-page">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      :title="_t18('invite_detail')"
      left-arrow
      @click-left="handleBack"
      style="background-color: var(--ex-home-box-background-color);"
    />

    <!-- 内容卡片 -->
    <div class="article-card" v-if="questionDetail.question">
      <h1 class="article-title">{{ questionDetail.question }}</h1>
    <div class="article-time">{{ formatTo12Hour(questionDetail.createTime) }}</div>
      <div class="article-content" v-html="currentHtml"></div>
    </div>
  </div>
</template>

<script setup>
import { getHelpcenterDetail } from '@/api/help/index'
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const currentHtml = ref('')
const questionDetail = ref({})

// ✅ 格式化为 12 小时制时间
function formatTo12Hour(timeStr) {
  if (!timeStr) return '-'
  const date = new Date(timeStr)
  if (isNaN(date)) return timeStr

  let hours = date.getHours()
  const minutes = String(date.getMinutes()).padStart(2, '0')
  const ampm = hours >= 12 ? 'PM' : 'AM'
  hours = hours % 12 || 12
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const year = date.getFullYear()
  return `${month}/${day}/${year} ${hours}:${minutes} ${ampm}`
}


onMounted(async () => {
  const newsId = route.params.id
  if (newsId) {
    try {
      const res = await getHelpcenterDetail(newsId)
      if (res.code === 200) {
        questionDetail.value = res.data
        currentHtml.value = res.data.content
      }
    } catch (error) {
      console.error('Error fetching article detail:', error)
    }
  }
})

const handleBack = () => {
  router.back()
}
</script>

<style scoped lang="scss">
.article-detail-page {
  background: #f7f8fa;
  min-height: 100vh;
  padding-bottom: 40px;
}

:deep(.van-nav-bar__title) {
  font-weight: 700;
  color: #000;
}

.article-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px 18px;
  margin: 20px auto 0 auto;
  width: 92%;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.article-title {
  font-size: 18px;
  font-weight: 700;
  color: #111;
  margin-bottom: 8px;
  line-height: 1.4;
}

.article-time {
  font-size: 13px;
  color: #777;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 16px;
}

.article-content {
  font-size: 15px;
  line-height: 1.7;
  color: #333;

  :deep(p) {
    margin-bottom: 12px;
  }
}
</style>
